<template>
	<view class="lay-root">
		<view class="head-lay">
			<view class="flex-h" style="align-items: center;">
				<view class="select-text" @click="onSelectClick">
					{{ $t(selectState == 2 ? "public.unSelectAll" : "public.selectAll")  }} ({{selectCount}} /
					{{tabContentData.length}})
				</view>
			</view>
			<view class="select-title" @click="onTestClick">{{showText}}</view>
			<view class="flex-h" style="align-items: center;">
				<image @click="onScreenClick" class="head-icon"
					:src=" screenState == 1 ? '/static/imgs/tools/icon_menu_screening@2x.png' : '/static/imgs/tools/icon_menu_screening_unnor@2x.png'">
				</image>
				<image @click="onDrawClick" class="head-icon"
					:src=" drawState == 1 ? '/static/imgs/tools/icon_menu_drawing_on@2x.png' : '/static/imgs/tools/icon_menu_drawing_up@2x.png'">
				</image>
			</view>
		</view>
		<view class="master-lay">
			<view class="table-lay" :style=" showDrawLaySign ? 'width:60%' : 'width:100%'">
				<view class="table-head">
					<view class="head-item" v-for="(item,index) in tabHeadData" :key="index"
						:style="'width:' + (item.width) ">
						{{$t(item.title)}}
					</view>
				</view>
				<scroll-view class="table-content" scroll-y="true">
					<checkbox-group @change="checkboxChange">
						<view class="content-line" v-for="(item,index) in tabContentData" :key="index"
							@click="onItemClick(item,item.mac_numb)"
							:style="(tableSelectId == item.mac_numb ? 'background:#9ACAED' : '')">
							<view class="content-cell" :style="'width:' + (tabHeadData[0].width) ">
								<checkbox :value="item.mac_numb" :checked="item.checked" />
							</view>
							<view class="content-cell" :style="'width:' + (tabHeadData[1].width) "> {{item.mac_numb}}
							</view>
							<view class="content-cell" :style="'width:' + (tabHeadData[2].width) ">
								{{item.planSign}}
							</view>
						</view>
					</checkbox-group>
				</scroll-view>
			</view>

			<view class="draw-lay" style="width:40%" v-if="showDrawLaySign">
				<drawingBasicFun style="width: 100%;" @onDrawCloseClick="onDrawCloseClick" :svgOption="selectSvgData">
				</drawingBasicFun>

			</view>
		</view>
		<view class="button-lay">
			<view class="button"  @click="onConcelClick">キャンセル</view>
			<view class="button" style="color: #007AFF;"  @click="onConfirmClick">OK</view>
		</view>
	</view>

	</view>
</template>

<script>
	import {
		genLocalDrawPath
	} from "@/localService/index.js";
	import drawingBasicFun from '@/_components/drawing/drawingBasicFun.vue';
	import screenData from "@/common/thick_index_screen_data.js";
	export default {
		components: {
			drawingBasicFun
		},

		props: {
			showText: {
				type: String,
				default: ''
			},

			originListData: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},

		watch: {
			originListData: {
				handler: function(newVal) {
					this.initTableContentData();
				},
				immediate: true
			}
		},

		data() {
			let _self = this;
			return {
				screenState: 0, // 0 未筛选 1 筛选
				selectState: 0, // 0 无选中；1 有选中；2 全选中
				drawState: 0, // 0 不显示图纸  1 显示图纸
				listCount: 0,
				selectCount: 0,
				popWidth: '50vw',

				tabHeadData: screenData.tabHead,
				tabContentData: screenData.tabContentData,

				tableSelectId: '',
				tableSelectData: null,
				showDrawLaySign: false,

				selectSvgData: {
					svgSourcePath: "",
					svgSourceUrl: "",
				},

				thisUnselectList: [],
			}
		},

		methods: {
			initTableContentData() {
				this.screenState = 0;
				this.selectState = 0;
				this.drawState = 0;

				if (getApp().globalData.thickIndexScreenUnselectList)
					this.thisUnselectList = JSON.parse(JSON.stringify(getApp().globalData.thickIndexScreenUnselectList));

				this.isShowDrawLay(false);
				this.optTableListData();
			},

			optTableListData() {
				let _self = this;

				// 筛选列表
				if (this.screenState == 0) { // 全部列表
					this.tabContentData = [];
					this.originListData.forEach(e => {
						this.tabContentData.push(e);
					})

				} else { // 筛选有计划的列表项目
					this.tabContentData = [];
					this.originListData.forEach(e => {
						// if (e.plan_mac_numb == 1 || e.plan_mac_numb == 2 || e.plan_mac_numb == 3)
						// 	this.tabContentData.push(e);
						
						if(!e.wrk_cls_code) {
							
						}
						else if (e.wrk_cls_code >= 0)
							this.tabContentData.push(e);
					})
				}

				// 标记选中状态
				this.selectCount = 0;
				this.tabContentData.forEach(e => {
					if (_self.thisUnselectList.includes(e.mac_numb))
						e.checked = false;
					else
						e.checked = true;

					if (e.checked)
						_self.selectCount++;
				})

				this.listCount = this.tabContentData ? this.tabContentData.length : 0;
			},

			onTestClick() {
				this.isShowDrawLay(!this.showDrawLaySign)
			},

			isShowDrawLay(isShow) {
				this.drawState = isShow ? 1 : 0;
				if (isShow)
					this.popWidth = '100vw';
				else
					this.popWidth = '60vw';
				this.$emit("changePopWidth", this.popWidth);
				this.showDrawLaySign = isShow;

				if (isShow) {
					this.changeDrawPath();
				}
			},

			changeDrawPath() {
				let _self = this;
				genLocalDrawPath(this.tableSelectData.drw_pass, this.tableSelectData.plt_path).then(e => {
					console.log("onTableSelect  genLocalDrawPath");
					console.log(e);
					_self.showDrawLay = true;
					_self.selectSvgData.svgSourcePath = e;
					_self.selectSvgData.svgSourceUrl = e;
				});
			},

			onSelectClick() {
				if (this.selectState != 2) {
					this.changeTableAllSelectState(true);
				} else {
					this.changeTableAllSelectState(false);
				}
			},

			changeTableAllSelectState(isSelectAll) {
				console.log("changeTableAllSelectState --- ");
				this.tabContentData.forEach(e => {
					e.checked = isSelectAll;
				})
				this.selectState = isSelectAll ? 2 : 0;
				this.selectCount = isSelectAll ? this.tabContentData.length : 0;
			},

			/**
			 * 列表项目checkbox点击 
			 * @param {Object} e
			 */
			checkboxChange(e) {
				let tempSelects = e.detail.value;
				this.selectCount = tempSelects.length;
				let tempSelectAll = this.selectCount == this.listCount;
				this.selectState = tempSelectAll ? 2 : 0;

				this.thisUnselectList = [];
				this.tabContentData.forEach(e => {
					if (!tempSelects.includes(e.mac_numb))
						this.thisUnselectList.push(e.mac_numb);
				})

				let _self = this;
				this.tabContentData.forEach(e => {
					if (_self.thisUnselectList.includes(e.mac_numb))
						e.checked = false;
					else
						e.checked = true;
				})
			},

			/**
			 * 列表项点击，
			 * @param {Object} item
			 * @param {Object} itemId
			 */
			onItemClick(item, itemId) {
				this.tableSelectId = itemId;
				this.tableSelectData = item;
				// this.isShowDrawLay(true);

				if (this.showDrawLaySign)
					this.changeDrawPath();
			},

			/**
			 * 图纸关闭按钮点击
			 */
			onDrawCloseClick() {
				// this.showDrawLaySign = false;
				this.isShowDrawLay(false);
			},

			/**
			 * 筛选icon点击
			 */
			onScreenClick() {
				this.screenState = Math.abs(this.screenState - 1);
				this.optTableListData();
			},

			/**
			 * 图纸icon点击
			 */
			onDrawClick() {
				if (!this.tableSelectId)
					return;
				this.isShowDrawLay(!this.showDrawLaySign);
			},

			onConfirmClick() {
				getApp().globalData.thickIndexScreenUnselectList = this.thisUnselectList;
				this.$emit("onCloseClick", true);
			},
			
			onConcelClick() {
				this.$emit("onCloseClick");
			}
		}
	}
</script>

<style scoped lang="scss">
	.lay-root {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
	}

	.master-lay {
		display: flex;
		flex-direction: row;
	}

	.head-lay {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10upx;

		background: #FFFFFF;
		border: 1px solid #E8E8E8;

		.select-text {
			font-size: 14px;
			color: #333333;
			padding: 5upx;
		}

		.select-title {
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.head-icon {
			padding: 5px;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.table-lay {
		display: flex;
		flex-direction: column;
		padding: 10upx;

		.table-head {
			display: flex;
			flex-direction: row;
			align-items: center;

			.head-item {
				padding: 10px;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1F2329;
				background: #F8F8F9;
				box-shadow: 0px 1px 0px 0px #E8E8E8;
				border: 1px solid #E8E8E8;

				text-align: center;
			}
		}

		.table-content {
			height: 70vh;

			.content-line {
				width: 100%;
				display: flex;
				flex-direction: row;

				.content-cell {
					font-size: 14px;
					padding: 10px;
					border: 0.5px solid #E8E8E8;

					display: flex;
					flex-direction: column;
					align-items: center;
					color: #666666;
				}
			}
		}
	}

	.button-lay {
		display: flex;
		flex-direction: row;
		align-items: center;

		.button {
			width: 50%;
			padding: 10upx;
			background: #FFFFFF;
			box-shadow: 1px 1px 1px 1px #E8E8E8;

			font-size: 20upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}
	}
</style>
